import { computed } from 'vue';
import type { ConfigProviderProps } from 'ant-design-vue';
import type { OverrideToken } from 'ant-design-vue/es/theme/interface';
import { defineStore } from 'pinia';
import { THEME_STORE } from '../constant';

export const useThemeStore = defineStore(
  THEME_STORE,
  () => {
    const topHeaderTheme = computed<ConfigProviderProps['theme']>(() => {
      return {
        components: {
          Layout: {
            colorBgHeader: 'linear-gradient(180deg, #242e3f 0%, #232532 100%)', // layout 整体样式
            colorBgBody: 'transparent',
          },
          Menu: {
            fontSize: 18,
            colorItemBgSelected: '#333',
            // colorItemTextSelected: '#fff',
            // colorItemTextSelectedHorizontal: '#fff',
            colorActiveBarHeight: 0,
            lineHeight: 54,
            colorBgBase: '#f00',
            lineWidth: 0,
          },
        },
      };
    });

    return {
      topHeaderTheme,
    };
  },
  {
    persist: true,
  },
);
